// 路由
import Vue from "vue"
import VueRouter from 'vue-router'
import Home from '@/pages/Home'
import Login from '@/pages/Login'
import Register from '@/pages/Register'
import Search from '@/pages/Search'
import Test from '@/pages/Test'
Vue.use(VueRouter)

// 编程式导航点击多次路径没有发生变化跳转会报错，我们需要解决这个问题，
// 我们可以借鉴数组响应式的给数组七个方法实现响应式的方法给编程式导航的push和replace方法包装一下
// push和replace方法是VueRouter原型身上的方法

// 包装push方法
// 首先我们先把具有跳转功能的push方法缓存下来
let originPush = VueRouter.prototype.push
// 在VueRouter身上重新添加一个新的push方法覆盖之前的push方法，之后通过this.$router方法调用的push方法都是我们自己写的这个push方法
VueRouter.prototype.push = function (localtion,resolve,reject) {
    if (resolve === undefined && reject === undefined) {
        // 表示使用push方法时，一个回调函数都没有传递，就需要我们解决报错问题
        // 调用原来的push方法，使用catch方法处理报错
        // 我们需要将originPush里面的this改变为调用的路由器实例，因为之前是路由器实例调用的这方法
        // 我们自己的push方法是由路由器实例调用的，所以这个函数里面的this一定指向路由器实例，所以call方法中传递this就可以了
        // 原来的push方法调用之后会返回一个promise，所以我们键这个promise返回出去就可以了
        return originPush.call(this, localtion).catch(()=>{}) 
    } else {
        // 表示使用push方法时，传递了一个或者两个回调函数,直接使用路由器实例调用原来的push方法返将接收到的回调函数传递，然后返回出去就可以了
        return originPush.call(this, localtion,resolve,reject)
    }
}
// 包装replace方法   同理push方法
// 首先我们先把具有跳转功能的push方法缓存下来
let originReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function (localtion, resolve, reject) {
    if (resolve === undefined && reject === undefined) {
        return originReplace.call(this, localtion).catch(() => { })
    } else {
        return originReplace.call(this, localtion,resolve,reject)
    }
}




export default new VueRouter({
    routes: [//一级路由
        {
            path: '/home',
            component:Home
        },
        {
            path: '/login',
            component: Login,
            //登录和注册组件展示的时候Footer组件是不展示的，可以使用路由里面mate配置项进行配置使用控制Footer显示与否,在组件中通过this.$route可以访问到当前组件，里面有meta属性
            meta: {
                isHidden:true
            }
        },
        {
            path: '/register',
            component: Register,
            // 和登录组件一样，登录和注册组件展示的时候Footer组件是不展示的
            meta: {
                isHidden: true
            }
        },
        {
            path: '/search/:keyword?',//传参占位符
            component: Search,
            name: 'search',
            props:(route)=>({...route.params})//简化组件模板使用数据
        },
        {//进入页面默认展示home组件
            path: '/',
            redirect:'/home'
        },
        {
            path: '/test',
            component:Test
        }
    ]
})